<template>
	<el-aside class="content-sticky-top" scroll-y="auto"
		:style="'z-index: 8;width: '+asideW+'px;height:100%;padding-top: 10px;border-right:1px solid #E9ECEF'">
		<view style="cursor: pointer;display: flex;justify-content: center;margin-bottom: 10px;" @click="navigateBack">
			<uv-icon name="/static/return.svg" color="#2979ff" size="30"></uv-icon>
		</view>

		<view v-for="(item,index) in aiList" :key="index" style="margin: 0px;padding: 0px;overflow: hidden;">
			<!-- v-if="item.tag.includes(pages())" -->
			<view class="cursor-pointer"
				:style="'margin-bottom: 10px;display: flex;justify-content: flex-start;align-items: center;color:'+deepColor"
				@click="clicklist(item,index)">
				<view style="margin-right: 5px;">
					<el-image
						:style="checke(item,index)?'width: auto;height: 39px;':'width: auto;height: 39px;opacity: 0;'"
						src="/static/index/svg/select.svg" fit="fill"></el-image>
				</view>
				<view :class="checke(item,index)?'item_sd item_acting':'item_sd '">
					<el-image :style="checke(item,index)?'width: 20px; height: auto;':'width: 20px; height:auto;'"
						:src="'/static/index/svg'+(checke(item,index)?'/select':'')+'/'+item.icon+'.svg'"
						fit="fill"></el-image>
					<view :style="checke(item,index)?'font-weight: bolder;font-size: 12px;':'font-size: 12px;'">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>
	</el-aside>
</template>

<script>
	import config from '@/common/config'
	import {
		task,
		index,
		taskId,
		getScroll,
		scroll,
		getAis,
	} from '@/common/api.js';
	import helangCompress from '@/components/compress/compress.vue';
	export default {
		components: {
			// 注册组件
			helangCompress
		},
		props: {
			minWidth: {
				type: [Number, String],
				default: 1
			},
			aside: {
				type: Boolean,
				default: false
			},
			asideW: {
				type: Number,
				default: 0
			},
			deepColor: {
				type: String,
				default: '#4D4D4D'
			},
			shallowColor: {
				type: String,
				default: '#808080'
			},
			lightColor: {
				type: String,
				default: '#ccc'
			},
			aiType: {
				type: String,
				default: ''
			},
			aicurrent: {
				type: Number,
				default: -1
			},
		},
		data() {
			return {
				aiTyped: this.aiType,
				current: this.aicurrent,
				is: 1,
			}
		},
		mounted() {
			this.getAi();
		},
		watch: {
			// 监听data数据的变化
			aicurrent: {
				handler: function(newVal, oldVal) {
					this.is = 1;
					this.current = newVal;
				},
				deep: true
			},
			aiType: {
				handler: function(newVal, oldVal) {
					this.is = 2;
					this.aiTyped = newVal
				},
				deep: true
			},
			// aiType: {
			// 	handler: function(newVal, oldVal) {
			// 		this.current = newVal;
			// 	},
			// 	deep: true
			// },
		},
		methods: {
			checke(e, i) {
				return this.is == 1 ? i == this.current : e.value == this.aiTyped;
			},
			pages() {
				var pages = getCurrentPages() // 获取栈实例
				let currentRoute = pages[pages.length - 1].route; // 获取当前页面路由
				let currentPage = pages[pages.length - 1]['$page']['fullPath'] //当前页面路径(带参数)
				return currentPage.split('/')[2];
			},
			getAi() {
				getAis({
					custom: {
						auth: true,
						toast: false,
					},
					params: {
						ai: this.aiApi,
						type: this.pages(),
					}
				}).then(e => {
					if (e) {
						this.$uv.vuex('aiList', e);
						this.$emit('custom-list', e);
						this.$emit('custom-type', this.aiTyped ? this.aiTyped : e[this
							.aicurrent]?.value);
						// this.$emit('custom-event', this.aicurrent);
						// this['config_' + this.tabbarsValue][this.type] = newVal
						// this.$uv.vuex('config_' + this.tabbarsValue, this['config_' + this.tabbarsValue]);
					}
				})
			},
			clicklist(ite, i) {
				this.aiTyped = ite.value
				this.current = i;
				this.$emit('custom-event', i);
				this.$emit('custom-type', ite.value);
				// if (ite.frist) {
				// 	return;
				// }
				// this.aiList.map((item, index) => {
				// 	if (item.name === ite.name) {
				// 		this.aiTyped = index
				// 	}
				// })
			},
		}
	}
</script>

<style scoped lang="scss">
	.content-sticky-top {
		// height: 39px;
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		/* 粘性定位的容器距离顶部的距离 */
		background-color: #fff;
		z-index: 10;

		/* 确保菜单在页面内容之上 */
		.item_sd {
			border-radius: 50%;
			width: 45px;
			height: 45px;
			border: 1px solid #E9ECEF;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
		}

		.item_acting {
			background-color: #F2F2F2;
		}
	}
</style>